<template>
  <h1>Todo List</h1>
  <div class="projectBox">
    <header>
      <input class="toggleSelect" v-model="toggleSelect" type="checkbox">
      <input class="newTodo" autofocus @keyup.enter="addNewTodo" v-model="newTodo" type="text" placeholder="在此输入你的任务…">
    </header>
    <main>
      <div class="noTodo" v-if="!todoList.length">当前无任务</div>
      <ul class="todoArray">
        <li class="todoItem" v-for="(item, index) in showList">
          <input class="todoSelect" :disabled="item.editing" type="checkbox" v-model="item.completed">
          <input class="todoEdit" v-model="item.content" type="text" @keyup.enter="submitEdit(index)"
            @blur="submitEdit(index)" v-if="item.editing">
          <label class="todoLabel" :class="{ completed: item.completed }" @dblclick="todoList[index].editing = true"
            v-else="!item.editing">{{
              item.content
            }}</label>
          <span class="todoDelete" @click="delTodo(index)">×</span>
        </li>
      </ul>
    </main>
    <footer>
      <div class="progress"> {{ todoList.length - unCompletedNum + '/' + todoList.length }}</div>
      <div class="optionBox">
        <span :class="{ selected: status == 'all' }" @click="status = 'all'">全部</span>
        <span :class="{ selected: status == 'completed' }" @click="status = 'completed'">已完成</span>
        <span :class="{ selected: status == 'unCompleted' }" @click="status = 'unCompleted'">未完成</span>
      </div>
      <div class="clearAllCompeleted" v-show="todoList.length > unCompletedNum" @click="delAllCompleted"> 清除已完成 </div>
    </footer>
  </div>
  <div class="copyRight">© {{ new Date().getFullYear() }} <a href="http://www.hecongcong.com/">www.hecongcong.com</a>
  </div>

</template>

<script setup>
import { ref, computed } from 'vue'
let newTodo = ref('')
let status = ref('all')
let todoList = ref([
  { id: 0, content: '吃饭', completed: false, editing: false },
  { id: 1, content: '睡觉', completed: true, editing: false },
  { id: 2, content: '打豆豆', completed: false, editing: false },
])

const unCompletedNum = computed(() => {
  return todoList.value.filter((item) => !item.completed).length
})

const showList = computed(() => {
  return status.value == 'completed' ? todoList.value.filter(i => i.completed)
    : status.value == 'unCompleted' ? todoList.value.filter(i => !i.completed)
      : todoList.value
})

const toggleSelect =
  computed({
    get: () => {
      return unCompletedNum.value == 0;
    },
    set: (value) => {
      value ? todoList.value.map((item) => (item.completed = true))
        : todoList.value.map((item) => (item.completed = false));
    }
  })

// 新建任务
const addNewTodo = () => {
  newTodo.value.trim() != '' && todoList.value.unshift({ id: new Date().getTime(), content: newTodo.value, completed: false })
  newTodo.value = ''
}
// 删除任务
const delTodo = (index) => { todoList.value.splice(index, 1); }
// 编辑任务 任务不可修改为空 否则无法提交修改
const submitEdit = (index) => {
  if (todoList.value[index].content.trim() == '') return
  todoList.value[index].editing = false
}
// 删除已完成任务
const delAllCompleted = () => { todoList.value = todoList.value.filter((item) => !item.completed); }

</script>

<style lang="less" scoped>
input[type='checkbox'] {
  margin: 0 10px;
  width: 30px;
  height: 30px;
  appearance: none;
  color: red;
  position: relative;
}

header input[type="checkbox"]::before,
header input[type="checkbox"]:checked::before {
  border-radius: 10px;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  // top: 0;
  // left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  border-radius: 50%;
}

input[type="checkbox"]:checked::before {
  content: "\2714";
  position: absolute;
  font-size: 25px;
  text-align: center;
  line-height: 30px;
}

h1 {
  text-align: center;
  font-size: 32px;
  margin: 30px 0;
}

h1::after {
  content: '';
  background-color: red;
  width: 70px;
  border-radius: 10px;
  height: 5px;
  display: block;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}

.projectBox {
  box-shadow: rgba(0, 0, 0, 0.5) 10px 10px 10px;
  border: 5px solid #fff;
  border-radius: 15px;
  width: 50%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;

  header {
    padding: 10px 20px;
    display: flex;
    align-items: center;

    .newTodo {
      font-size: 24px;
      border: none;
      width: 80%;
      padding: 10px 20px;
      background-color: transparent;
      border-bottom: 3px solid gray;
      color: #fff;
    }

    .newTodo:focus {
      outline: none;
    }
  }

  main {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;

    .noTodo {
      text-align: center;
    }

    .todoItem {
      font-size: 18px;
      display: flex;
      justify-content: left;
      align-items: center;
      margin: 10px 0;

      .todoEdit {
        width: 80%;
        font-size: 18px;
        background-color: antiquewhite;
        box-shadow: inset rgba(0, 0, 0, 0.5) 1px 1px 5px;
        border: none;
        border-radius: 5px;
        outline: none;
        padding: 5px 10px;
        border-bottom: 1px dashed gray;
      }

      .todoLabel {
        width: 80%;
        padding: 5px 10px;
        border-bottom: 1px dashed gray;
      }

      .todoLabel.completed {
        color: gray;
        text-decoration: line-through;
      }

      .todoDelete {
        position: absolute;
        right: 0%;
        transform: translateX(-100%);
        display: none;
        color: white;
        background-color: red;
        box-shadow: rgba(64, 63, 63, 0.5) 3px 5px 5px;
        border-radius: 5px;
        margin-left: auto;
        font-size: 25px;
        height: 30px;
        line-height: 30px;
        width: 30px;
        text-align: center;
        cursor: pointer;
      }
    }

    .todoItem:hover {
      .todoDelete {
        display: block;
      }
    }

  }

  footer {
    display: flex;
    padding: 20px;
    align-items: baseline;

    .progress {
      margin: 0 15px;
    }

    .optionBox {
      margin: 0 20px;

      span {
        font-size: 16px;
        padding: 5px 10px;
        cursor: pointer;
      }

      span.selected {
        border-bottom: 3px solid gray;
      }
    }

    .clearAllCompeleted {
      margin: 0 15px;
      margin-left: auto;
      font-size: 16px;
      cursor: pointer;
      padding: 5px 10px;

      &:hover {
        background-color: red;
        box-shadow: rgba(64, 63, 63, 0.5) 3px 5px 5px;
        border-radius: 5px;

      }
    }

  }
}

.copyRight {
  margin: 30px 0;
  color: gray;
  text-align: center;
}

@media screen and (max-width: 500px) {
  input[type='checkbox'] {
    margin: 0 10px;
    width: 20px;
    height: 20px;
  }

  input[type="checkbox"]:checked::before {
    font-size: 20px;
    line-height: 20px;
  }

  .projectBox {
    width: 90%;

    footer {
      .progress {
        margin: 0 5px;
      }

      .optionBox {
        margin: 0 5px;

        span {
          padding: 2px 5px;
        }


      }

      .clearAllCompeleted {
        margin: 0;
        padding: 2px 5px;
      }
    }


  }



}
</style>